<template>
  <div class="classic">
    <!-- <img alt="Vue logo" src="../assets/logo.png"> -->
    <div class="apptitle">请选择发票类型</div>
    <!-- <div>{{ serverId }}</div> -->
    <ul class="flex flex-jus-start flex-wrap">
      <li v-for="item in list" :key="item.index" @click="chooseimg(item.value)">
        {{ item.label }}
      </li>
    </ul>
  </div>
</template>

<script>
import { media } from "../plugins/api"
import { mapMutations } from 'vuex'
import { Toast } from "vant-green"
export default {
  name: 'selectClassic',
  data(){
    return {
      list  : [],
      serverId:'123'
    }
  },
  components: {},
  methods:{
    ...mapMutations(['setTempInvoiceInputList','setFullLoading','setBillTypeLists']),
    toLink(url, params){
      this.$router.push({ path: url, query: params });
    },
    // 上传图片
    chooseimg(index){
      this.index = index;
      let _this = this
      // 获取图片
      this.$wechat.chooseImage({
          count: 1, // 默认9
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
          defaultCameraMode: "batch", //表示进入拍照界面的默认模式，目前有normal与batch两种选择，normal表示普通单拍模式，batch表示连拍模式，不传该参数则为normal模式。从3.0.26版本开始支持front和batch_front两种值，其中front表示默认为前置摄像头单拍模式，batch_front表示默认为前置摄像头连拍模式。（注：用户进入拍照界面仍然可自由切换两种模式）
          isSaveToAlbum: 1, //整型值，0表示拍照时不保存到系统相册，1表示自动保存，默认值是1
          success: function (res) {
            _this.$store.commit('setFullLoading',true)
            _this.uploadimg(res.localIds)
          },
          fail(err) {
            Toast(err)
            // 处理选择图片失败的逻辑
          }
      });
    },
    uploadimg(element){
      let _this = this;
      this.$wechat.uploadImage({
        isShowProgressTips : 1, // 默认为1，显示进度提示
        localId            : element[0], // 需要上传的图片的本地ID，由chooseImage接口获得
        success(r){
          var serverId = r.serverId; // 返回图片的服务器端ID
          _this.serverId = serverId
          // 没有图片了则开始上传
          const formData = new FormData()
                formData.append('type',_this.index) // 发票类型 
                // 此处使用模拟数据 需要切换正式数据
                formData.append('mediaIds',[serverId]) // 图片列表 ['3WGBdlGovN_3FFrKr_fin0CvqIfrxNNTC67ksA25aWEcCrVQiSxb-v774DfOZfxoE']
                formData.append('userId',localStorage.getItem('userId'))
          media(formData).then(e=>{
            _this.$store.commit('setFullLoading',false)
            // 此处接口上传图片的id 后端去微信服务器拉图片 判断图片类型信息 
            if(e.code == 200){
              // 如果可以识别则走ManualShow页面
              let arr = [...e.data]
              // 保存到vuex中 跳转到查看页面 
              _this.$store.commit('setTempInvoiceInputList',arr)
              _this.toLink('/manualShow',{})
            }else{
              Toast(e.msg)
            }
          })
        }
        // ,fail(err){
        //   console.log(`fail:`,err)
        // },
        // complete(com){
        //   console.log(`complete:`,com)
        // },
        // cancel(can){
        //   console.log(`cancel:`,can)
        // }
      });
      
    }
  },
  mounted(){
    this.$store.commit('setFullLoading',false)
    // 获取票据类型列表
    this.list = this.$store.state.billTypeLists
    console.log(this.list);
  },
  //设置title的钩子
  beforeRouteEnter(to, from, next) {
    document.title = to.meta.title || 'Default Title';
    next();
  },
  beforeRouteUpdate(to, from, next) {
    document.title = to.meta.title || 'Default Title';
    next();
  },
}
</script>

<style>
  
  .van-collapse-item__content div {
    font-size: .32rem;
    padding:.25rem .1rem;
    border-bottom: .01rem solid #eee;
  }
  .van-cell__title-text {
    font-size: .34rem;
  }
  .van-cell__title {
    color:#676767;
  }
  .van-collapse-item__content div:last-child {
    border-bottom: none;
  }
  .van-cell__right-icon {
    color:#ddd!important;
  }
  .van-collapse-item__content {
    padding:0.1rem 0.3rem!important;
  }
  .classic ul {
    padding-top: 0.3rem!important;
  }
  .classic li {
    background-color: white;
    font-size: 0.28rem;
    box-shadow: 0 .06rem .23rem rgba(103, 124, 253, 0.3);
    color: #4ec9fa;
    padding: 0.12rem 0.3rem;
    margin: 0.15rem;
    border-radius: 100rem;
  }
</style>